<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-customized-ring-graph',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'radar',
      datatotal: '',
      legendData: []
    }
  },

  computed: {
    option () {
      let vm = this
      let img = ''

      let data = []
      for (var i = 0; i < this.data.length; i++) {
        data.push({
          value: this.data[i].value,
          name: this.data[i].name,
          itemStyle: {
            normal: {
              borderWidth: 5,
              shadowBlur: 20,
              borderColor: this.colors[i],
              shadowColor: this.colors[i]
            }
          }
        }, {
          value: 2,
          name: '',
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            }
          }
        });
      }
      let series = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [86, 94],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'outside',
              fontSize: this.labelFontSize,
              color: this.labelColor,
              formatter: function(params) {
                var percent = 0;
                var total = 0;
                for (var i = 0; i < vm.data.length; i++) {
                  total += vm.data[i].value;
                }
                percent = ((params.value / total) * 100).toFixed(0);
                if (params.name !== '') {
                  return   params.name + '\n' + '\n' + '' + percent + '%';
                } else {
                  return '';
                }
              },
            },
            labelLine: {
              length: 10,
              length2: 50,
              show: true,
              color: '#00ffff'
            }
          }
        },
        data: data
      }]

      return {

        graphic: {
          elements: [{
            type: "image",
            z: 3,
            style: {
              image: img,
              width: 138,
              height: 138
            },
            left: 'center',
            top: 'center',
            position: [100, 100]
          }]
        },
        title: {
          show: this.showTitle,
          text: !this.titleText ? this.datatotal : this.titleText,
          subtext: this.subtitleText,
          textAlign: 'center',
          top: this.titleTop,
          left: this.titleLeft,
          textStyle: {
            color: '#333',
            fontWeight: 700,
            fontSize: this.titleFontSize
          },
          subtextStyle: {
            color: '#aaa',
            fontWeight: 'normal',
            fontSize: this.subtitleFontSize
          }
        },
        color: this.colors,
        legend: {
          show: this.showLegend,
          left: this.legendLeft === '' ? 'auto' : this.legendLeft,
          top: this.legendTop === '' ? 'auto' : this.legendTop,
          right: this.legendRight === '' ? 'auto' : this.legendRight,
          bottom: this.legendBottom === '' ? 'auto' : this.legendBottom,
          itemHeight: 10,
          itemWidth: 10,
          icon: this.icon,
          textStyle: {
            padding: [3, 0, 0, 0]
          },
          data: this.legendData
        },

        tooltip: {
          trigger: this.triggerType,
          formatter: this.useTooltipFun ? this.tooltipFunction : this.tooltipLabel
        },
        series: series
      }
    }
  },

  methods: {
    setSeries () {

    }
  },

  watch: {
    innerRadius () {
      this.setSeries()
    },
    outerRadius () {
      this.setSeries()
    },

    showLabel () {
      this.setSeries()
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
